﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../static_files/bootstrap-table/bootstrap.min.css" rel="stylesheet">
    <link href="../static_files/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link type="text/css" href="../static_files/stylesheet/font-awesome.min.css" rel="stylesheet">
    <link href="../static_files/stylesheet/default.css" rel="stylesheet" />
    <!--<link href="../static_files/bootstrap-table/bootstrapValidator.css" rel="stylesheet" />-->
    <!--<link href="../static_files/stylesheet/bootstrapValidator.css" rel="stylesheet" />-->
    <!--<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">-->
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">

    <script type="text/javascript" src="../static_files/JavaScript/jquery.js"></script>
    <script src="../static_files/bootstrap-table/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <!--<script src="../static_files/JavaScript/bootstrapValidator.js"></script>-->
    <!--<script src="../static_files/bootstrap-table/bootstrapValidator.js"></script>-->
    <script src="../static_files/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../static_files/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

</head>
<body>
    <div class="container">

        <!-- 按钮：用于打开模态框 -->
        <!-- 模态框 -->
    </div>
    <table id="list_table"></table>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content" style="">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加/编辑 仓库</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header">
                            仓库信息
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="staticEmail" class="col-sm-2 col-form-label text-center">仓库编号：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="staticEmail">
                                </div>
                                <label for="inputPassword" class="col-sm-2 col-form-label text-center">仓库名称：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="inputPassword">
                                   
                                </div>
                                <label for="staticEmail" class="col-sm-2 col-form-label text-center">仓库地点：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="staticEmail">
                                </div> <label for="staticEmail" class="col-sm-2 col-form-label text-center">管理员姓名：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="staticEmail">
                                </div> <label for="staticEmail" class="col-sm-2 col-form-label text-center">联系方式：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="staticEmail">
                                </div> <label for="staticEmail" class="col-sm-2 col-form-label text-center">备注：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="staticEmail">
                                </div>
                            </div>
                        </div>

                    </div>
                  
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"><i class="fa fa-check-square-o addstyle_addpage_white"></i>&nbsp;提交</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var jsondata =
            [
                {
                    "ID": "001",
                    "Name": "材料库",
                    "Address": "公司材料库院内",
                    "Administrator": "张三",
                    "Contact": "13890742134",
                    "Remark": "新建仓库",
                    "Operate": "",
                },
                {
                    "ID": "002",
                    "Name": "材料库",
                    "Address": "公司材料库院内",
                    "Administrator": "张三",
                    "Contact": "13890742134",
                    "Remark": "新建仓库",
                    "Operate": "",
                },

            ]

        //初始化bootstrap-table的内容

        //记录页面bootstrap-table全局变量$table，方便应用
        $('#list_table').bootstrapTable({
            //url: queryUrl,                      //请求后台的URL（*）
            //method: 'GET',                      //请求方式（*）
            toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            //sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            /* pageSize: rows,         */            //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            //queryParams: function (params) {
            //    //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            //    var temp = {
            //        rows: params.limit,                         //页面大小
            //        page: (params.offset / params.limit) + 1,   //页码
            //        sort: params.sort,      //排序列名
            //        sortOrder: params.order //排位命令（desc，asc）
            //    };
            //    return temp;
            //},
            columns: [{
                checkbox: true,
                visible: true                  //是否显示复选框
            },
            {
                field: 'ID',
                title: '仓库编号',
                sortable: true
            }, {
                field: 'Name',
                title: '仓库名称',
                sortable: true
            }, {
                field: 'Address',
                title: '仓库地点',
                sortable: true
            }, {
                field: 'Administrator',
                title: '管理员',
                sortable: true
            },
            {
                field: 'Contact',
                title: '联系方式',
                sortable: true
                }, {
                    field: 'Remark',
                    title: '备注',
                    sortable: true
                },
                {
                field: 'Operate',
                title: '操作',
                align: 'center',
                width: 140,
                //events:operateEvents,
                formatter: actionFormatter,
            },],
            //onLoadSuccess: function () {
            //},
            //onLoadError: function () {
            //    showTips("数据加载失败！");
            //},
            data: jsondata,
            onLoadSuccess: function () {
                //alert('abc');
            },
            // 生成“ 添加”按钮
            onPostHeader: function () {
                //alert('head');
            },
            onPostBody: function () {
                //alert('body');
            }
        });
        $('.columns-right').append('&nbsp;&nbsp;<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100px">添加</button >');
        //操作栏的格式化
        function actionFormatter(value, row, index){
            return [
                '<button type="button" class="RoleOfdelete btn btn-primary btn-sm" style="margin-right:15px;">删除</button>',
                '<button type="button" class="RoleOfedit btn btn-primary btn-sm" style="margin-right:15px;" data-toggle="modal" data-target="#myModal">修改</button>'
            ].join('');
        }

    </script>
</body>

</html>